<template>
  <div id="app">
    <el-card class="box-card">
      <el-row>
        <div class="serche">
          <el-input placeholder="请输入用户名" v-model="userName">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="seache"
            ></el-button>
          </el-input>
        </div>
        <div class="addUser">
          <el-button type="primary" @click="addUser">添加用户</el-button>
        </div>
      </el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加用户的对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogVisible = false"
    >
      <!-- 添加用户的表单 -->
      <el-form label-width="100px">
        <el-form-item label="用户名:">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="年龄:">
          <el-input v-model="userInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-input v-model="userInfo.sex"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑的对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogVisible = false"
    >
      <!-- 编辑的表单 -->
      <el-form label-width="100px">
        <el-form-item label="用户名:">
          <el-input :disabled="true" v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="年龄:">
          <el-input v-model="userInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-input v-model="userInfo.sex"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  created() {
    this.getAllUser();
  },
  data() {
    return {
      tableData: [],
      editDialogVisible: false,
      userInfo: {},
      userName: "",
      addDialogVisible: false,
    };
  },
  methods: {
    //获取所有用户
    async getAllUser() {
      const { data: res } = await this.$http.get("/getAllUser/");
      this.tableData = res;
      console.log(res);
    },
    handleEdit(userInfo) {
      this.editDialogVisible = true;
      this.userInfo = userInfo;
      console.log(this.userInfo);
    },
    //根据用户删除id
    async handleDelete(id) {
      const { data: res } = await this.$http.get(`/delUserById/?Id=${id}`);
      this.getAllUser();
      console.log(res);
    },
    //确定修改用户信息
    async editUserInfo() {
      this.editDialogVisible = false;
      //let updatedUserInfo = this.userInfo
      /*  const { data: res } = await this.$http.post("/updataUser/", {
        "updatedUserInfo": JSON.stringify(this.userInfo),
        'Content-Type':'application/x-www-form-urlencoded'
      }) */
      /*  var data =
        "updatedUserInfo=%7B%22id%22%3A%204%2C%20%22age%22%3A%2018%2C%20%20%22sex%22%3A%200%7D"; */
      var data = "updatedUserInfo=" + JSON.stringify(this.userInfo);
      var xhr = new XMLHttpRequest();
      xhr.withCredentials = true;

      xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
          console.log(this.responseText);
        }
      });

      xhr.open("POST", "http://127.0.0.1:5000/updataUser/");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      xhr.send(data);
      /*       const { data: res } = await this.$http.post({
         url:'/updataUser/', //地址
         data:{ //参数
            updatedUserInfo: this.userInfo,
         }
      }); */
      this.getAllUser();
      //console.log(res);
    },
    //添加用户
    addUser() {
      this.addDialogVisible = true;
    },
    //确认添加用户
    addUserInfo() {
      this.addDialogVisible = false;
      var data = "userInfo=" + JSON.stringify(this.userInfo);
      var xhr = new XMLHttpRequest();
      xhr.withCredentials = true;

      xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
          console.log(this.responseText);
        }
      });

      xhr.open("POST", "http://127.0.0.1:5000/addUser/");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      xhr.send(data);

      this.getAllUser();
      console.log(this.userInfo);
    },
    //查询用户
    async seache() {
      if (this.userName.trim().length == 0) {
        this.getAllUser();
      } else {
        const { data: res } = await this.$http.get(
          `/getUserByName/?userName=${this.userName}`
        );
        this.tableData = res;
        console.log(res);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 800px;
  background-color: #f8e6e6;
}
.serche {
  width: 500px;
}
.serche,
.addUser {
  margin: 10px;
  float: left;
}
.addUser {
  float: right;
}
</style>
